<!-- 本页面功能为：
 1. 页面采用多行布局，每行为flex横向布局。
 2. 第一行：拉取串口的数据，数据参考SerialInfo，并显示在element-plus的下拉菜单中
 3. 第二行：有一个下拉菜单，列出了本地有的所有micropython固件版本，并且具备“烧录固件”和“清空开发板”
 两个按钮；
 4. 第三行：有一个下拉菜单，列出了本地所有的程序文件，并且具备“烧录引导程序”、“烧录功能程序”这两个按钮。
 
 以上内容中，点击按钮可以执行相应功能。
  -->
  <template>
    <div>
      <!-- 第一行：串口数据 -->
      <div style="display: flex;">
        <el-select v-model="selectedPort" placeholder="请选择串口">
          <el-option
            v-for="port in serialPorts"
            :key="port.hwid"
            :label="port.description"
            :value="port.port">
          </el-option>
        </el-select>
      </div>
      <!-- 第二行：micropython固件版本 -->
      <div style="display: flex;">
        <el-select v-model="selectedFirmware" placeholder="请选择固件版本">
          <el-option
            v-for="firmware in firmwareVersions"
            :key="firmware.id"
            :label="firmware.name"
            :value="firmware.version">
          </el-option>
        </el-select>
        <el-button @click="flashFirmware">烧录固件</el-button>
        <el-button @click="eraseBoard">清空开发板</el-button> 
      </div>
      <!-- 第三行：程序文件 -->
      <div style="display: flex;">
        <el-select v-model="selectedProgram" placeholder="请选择程序文件">
          <el-option
            v-for="program in programFiles"
            :key="program.id"
            :label="program.name"
            :value="program.path">
          </el-option>
        </el-select>
        <el-button @click="flashBootloader">烧录引导程序</el-button>
        <el-button @click="flashProgram">烧录功能程序</el-button> -->
      </div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import { getSerialPorts } from '@/api/serial'; // 假设有一个API来获取串口数据
  
  export default {
    setup() {
      const serialPorts = ref([]);
      const selectedPort = ref('');
  
      onMounted(async () => {
        try {
          const ports = await getSerialPorts();
          serialPorts.value = ports;
        } catch (error) {
          console.error('获取串口数据失败', error);
        }
      });
  
      return {
        serialPorts,
        selectedPort,
      };
    },
  };
  </script>